class UeditorList extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.state = {
            list: ''
        }
    }

    layuiInitComplete() {
        this.form = layui.form();
        this.layer = layui.layer;
        this.queryList(1);
    }

    queryList(page) {
        let param = {};
        param.pageSize = 10;
        //保证通过之后还是在当前页
        if (page > 1 && this.state.list.length === 1) {
            param.page = page - 1;
        } else {
            param.page = page;
        }
        param.queryContent = this.refs.queryContent.value;
        this.updateList(param);
    }

    updateList(param) {
        postJson('/cms/richText/queryEditorList.x', $.param(param), function (data) {
            this.page = param.page;
            this.setState({
                list: data.list
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'contentListPage'
                    , pages: Math.ceil(data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>{array.user}</td>
                    <td>{array.update_time}</td>
                    <td>{array.description}</td>
                    {this.props.selectCallback ? <td>
                        < button type="button"
                                 className="permsRemove layui-btn layui-btn-mini layui-btn-normal"
                                 onClick={() => this.seeUeditor(array.id)}>查看
                        </button>
                        < button type="button"
                                 className="permsRemove layui-btn layui-btn-mini"
                                 onClick={() => this.selectCallback(array.id)}>选择
                        </button>
                    </td> : <td>
                        < button type="button"
                                 className="permsRemove layui-btn layui-btn-mini layui-btn-danger"
                                 onClick={() => this.deleteUeditor(array.id)}>删除
                        </button>
                        < button type="button"
                                 className="permsRemove layui-btn layui-btn-mini"
                                 onClick={() => this.editUeditor(array.id)}>编辑
                        </button>
                    </td>
                    }
                </tr>)
            }.bind(this))
        }
    }

    deleteUeditor(id) {
        layer.confirm('确定要删除？', {
            btn: ['确定', '取消']
        }, function () {
            postJson("/cms/richText/deleteEditor.x", $.param({
                'id': id
            }), function () {
                this.queryList(this.page);
                layer.closeAll();
            }.bind(this));
        }.bind(this));
    }

    editUeditor(id) {
        window.location.href = "/pages/business/ueditor/ueditor.html?ueditorId=" + id;
    }

    selectParkCallback(value) {
        this.queryList(1);
    }

    seeUeditor(id) {
        let curWwwPath = window.document.location.href;
        //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        let pathName = window.document.location.pathname;
        let pos = curWwwPath.indexOf(pathName);
        //获取主机地址，如： http://localhost:8083
        let localhostPaht = curWwwPath.substring(0, pos);
        window.open(localhostPaht + "/api/v3/cms/anon/getContent?ueditorId=" + id, "_blank");
    }

    selectCallback(id) {
        this.props.selectCallback(id);
    }

    render() {
        return <form id="form" className="layui-form layui-form-pane">

            <div className="layui-form-item">
                <label className="layui-form-label">内容查询</label>
                <div className="layui-input-block">
                    <input className="layui-input" type="text" ref="queryContent"
                           style={{maxWidth: "90%", float: "left", marginRight: "10px"}}/>
                    <button type="button"
                            className="permsRemove layui-btn"
                            onClick={() => this.queryList(1)}>查询
                    </button>
                </div>
            </div>

            <div style={{'padding-bottom': '10px'}}>
                <table className="layui-table">
                    <colgroup>
                        <col width="150"/>
                        <col width="200"/>
                        <col/>
                        <col width="110"/>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>用户</th>
                        <th>更新时间</th>
                        <th>描述</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.tbody()}
                    </tbody>
                </table>
                < div style={{'float': 'right', 'margin-right': '1px'}} id="contentListPage"/>
            </div>
        </form>
    }
}
